---
comments: false
disable_fancybox: false
---

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <title>Document</title>
    <script src="js/shufaDictJS.js"></script>
    <link rel="stylesheet" href="css/shufaDictCSS.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@10/dist/sweetalert2.min.css">
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@3"></script>

</head>
<style>
    #container {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        /* 改为 flex-start */
        padding-top: 10px;
        gap: 10px;
        /* 使用 gap 来设置间距 */
    }

    .card {
        border-radius: 5px;
        width: calc(25% - 7.5px);
        /* 调整宽度计算 */
        aspect-ratio: 1 / 1;
        overflow: hidden;
        position: relative;
        transition: all 0.3s ease;
        position: relative;
        /* 新增 */
    }

    /* 新增以下类 */
    .card.dragging {
        opacity: 0.5;
        transform: scale(1.05);
        z-index: 10;
    }

    .card.drag-over {
        transform: scale(0.95);
    }

    /* 当只有一个或两个 .card 时的特殊样式 */
    #container:only-child .card,
    #container:nth-last-child(2):first-child .card,
    #container:nth-last-child(2):first-child~.card {
        width: calc(25% - 7.5px);
        margin-right: 10px;
    }

    .card img {
        border-radius: 10px;
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform 0.5s;
    }

    .text {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: var(--main-color);
        padding: 5px;
        opacity: 0;
        transition: opacity 0.5s;
    }

    .name,
    .author {
        font-size: 10px;
        color: lightgray;
        margin: 2px 0;
    }

    /* .card:hover img {
        transform: scale(1.1);
    } */

    /* .card:hover .text {
        opacity: 1;
    } */

    #nextStep {
        margin-top: 50px;
    }

    .delete-button {
        position: absolute;
        top: 5px;
        right: 5px;
        width: 20px;
        height: 20px;
        background-color: rgba(255, 255, 255, 0.6);
        border: 1px solid var(--main-color); /* 修正：设置边框 */
        border-radius: 50%;
        cursor: pointer;
        font-size: 12px;
        line-height: 20px;
        text-align: center;
        padding: 0;
        z-index: 10;
        display: none;
        color:black;
    }
    .select-button {
        position: absolute;
        top: 5px;
        right: 5px;
        width: 20px;
        height: 20px;
        background-color: rgba(255, 255, 255, 0.6);
        border: 1px solid var(--main-color); /* 修正：设置边框 */
        border-radius: 50%;
        cursor: pointer;
        font-size: 12px;
        line-height: 20px;
        text-align: center;
        padding: 0;
        z-index: 10;
        display: none;
        color:black;
    }
</style>

<body>
    <div id="buttonContainer">
        <div id="backButton"></div>
        <div id="buttonContainer2">
            <div id="clearButton"></div>
            <div id="moveButton"><span>选择</span></div>
        </div>
        
    </div>
    <div id="container"></div>
    <div class="next-button-container" id="nextStep">
        <button id="next-button" onclick="nextButtonAction()">下一步</button>
    </div>
</body>
<script>


    var key = ""
    var img = document.getElementById('backButton');
    var container = document.getElementById("container");
    var imagesArr = JSON.parse(localStorage.getItem('imageUrls')) || [];
    let selectedImages = [];
    let cardsArr = []

    img.addEventListener('click', function () {
        window.history.back()
    });

    if (imagesArr != undefined && imagesArr.length > 0) {
        // setupUI()

    }
    // 清空存储在本地的图片数组
    function clearImageUrls() {
        localStorage.removeItem('imageUrls');
        window.location.reload(); // 刷新页面
    }
    hiddenEle()

    function adjustLayout() {
        const container = document.getElementById('container');
        const cards = container.getElementsByClassName('card');
        if (cards.length <= 2) {
            container.style.justifyContent = 'center';
        } else {
            container.style.justifyContent = 'flex-start';
        }
        adjustLayout();
    }

    function nextButtonAction() {

        // var selectedImages = JSON.parse(localStorage.getItem('imageUrls')) || [];

        if (selectedImages.length == 0) {

            Swal.fire({
                text: '请至少添加1张图片！',
                confirmButtonText: '确定',
                // cancelButtonText: '取消',
                // showCancelButton: true, // 显示取消按钮
                reverseButtons: true,
                // 自定义样式
                customClass: {
                    container: 'custom-swal-container',
                    popup: 'custom-swal-popup',
                    // 修改标题样式
                    title: 'custom-swal-title',
                    // 修改内容文字样式
                    content: 'custom-swal-content',
                    // 修改确认按钮样式
                    confirmButton: 'custom-swal-confirm-button',
                    // 修改取消按钮样式（如果有的话）
                    cancelButton: 'custom-swal-cancel-button'
                },

                // 直接应用内联样式
                buttonsStyling: false, // 禁用默认的按钮样式
            })
            return;
         }
        if (selectedImages.length > 20) {

            Swal.fire({
                text: '最多只能添加20张图片！',
                confirmButtonText: '确定',
                // cancelButtonText: '取消',
                // showCancelButton: true, // 显示取消按钮
                reverseButtons: true,
                // 自定义样式
                customClass: {
                    container: 'custom-swal-container',
                    popup: 'custom-swal-popup',
                    // 修改标题样式
                    title: 'custom-swal-title',
                    // 修改内容文字样式
                    content: 'custom-swal-content',
                    // 修改确认按钮样式
                    confirmButton: 'custom-swal-confirm-button',
                    // 修改取消按钮样式（如果有的话）
                    cancelButton: 'custom-swal-cancel-button'
                },

                // 直接应用内联样式
                buttonsStyling: false, // 禁用默认的按钮样式
            })
            return;
        }
        localStorage.setItem('selectedImageUrls', JSON.stringify(selectedImages));
        window.location.href = "imageStitcher/index.html";
    }


    function createCard(dic, index) {
        const newDiv = document.createElement("div");
        newDiv.classList.add("card");

        newDiv.draggable = true;
        newDiv.setAttribute('data-index', index);

        // 创建一个包装器来容纳图片和删除按钮
        const imageWrapper = document.createElement("div");
        imageWrapper.classList.add("image-wrapper");

        let imgSrc = dic.dict_img;
        const img = document.createElement('img');
        img.src = imgSrc;
        imageWrapper.appendChild(img);

        const deleteButton = document.createElement('button');
        deleteButton.classList.add('delete-button');
        deleteButton.innerHTML = '✖';
        imageWrapper.appendChild(deleteButton);
        // 添加点击事件监听器
        deleteButton.addEventListener('click', function (event) {
            event.stopPropagation(); // 阻止事件冒泡
            deleteCard(newDiv, dic.dict_id); // 传递 id 到 deleteCard 函数
        });


        const selectButton = document.createElement('button');
        
        selectButton.classList.add('select-button');
        if (selectedImages.includes(index)) {
            selectButton.classList.add('selected');
            selectButton.textContent = selectedImages.indexOf(index) + 1;
        }
        // selectButton.innerHTML = '';
        imageWrapper.appendChild(selectButton);
        // 添加点击事件监听器
        selectButton.addEventListener('click', function (event) {
            event.stopPropagation(); // 阻止事件冒泡


            const card = selectButton.closest('.card');
            const index = parseInt(card.getAttribute('data-index'));
            const image = imagesArr[index];

            const selectedIndex = selectedImages.find(item => item === image) !== undefined;
            if (selectedIndex == true) {
                // 取消选择
                // selectedImages.splice(selectedIndex, 1);
                selectedImages = selectedImages.filter(item => item !== image);
                cardsArr = cardsArr.filter(item => item !== card);
                
                const currentIndex = parseInt(selectButton.textContent, 10);


                if (currentIndex != selectedImages.length+1) {
                    // const cards = document.querySelectorAll('.card');
                    // const reversedArray = Array.from(cards).reverse();
                
                    for (let i = currentIndex; i < selectedImages.length+1; i++) {

                        const card = cardsArr[i-1];
                        const imageButton = card.querySelector('.select-button');
                        
                        if (imageButton) {
                            imageButton.textContent = i;
                        }
                    }
                }

               
                selectButton.textContent = '';

            } else {
                // 选择图片
                selectedImages.push(image);
                cardsArr.push(card);
                selectButton.textContent = selectedImages.length;
            }

            // updateCards();
            console.log('当前选中的图片索引:', selectedImages);



        });

        newDiv.appendChild(imageWrapper);

        return newDiv;
    }

    function deleteCard(card, id) {
        Swal.fire({
            text: '确定要删除这张图片吗?',
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            showCancelButton: true, // 显示取消按钮
            reverseButtons: true,
            // 自定义样式
            customClass: {
                container: 'custom-swal-container',
                popup: 'custom-swal-popup',
                // 修改标题样式
                title: 'custom-swal-title',
                // 修改内容文字样式
                content: 'custom-swal-content',
                // 修改确认按钮样式
                confirmButton: 'custom-swal-confirm-button',
                // 修改取消按钮样式（如果有的话）
                cancelButton: 'custom-swal-cancel-button'
            },

            // 直接应用内联样式
            buttonsStyling: false, // 禁用默认的按钮样式
        }).then((result) => {
            if (result.isConfirmed) {
                card.remove();
                updateStoredData(id);
                playAnimation()
            }
        });
    }
    function updateStoredData(idToDelete) {
        // 从 localStorage 获取当前的图片数组
        let imageUrls = JSON.parse(localStorage.getItem('imageUrls')) || [];

        // 找到要删除的元素的索引
        const indexToDelete = imageUrls.findIndex(item => item.dict_id === idToDelete);

        if (indexToDelete !== -1) {
            // 从数组中删除该元素
            imageUrls.splice(indexToDelete, 1);

            // 更新 localStorage
            localStorage.setItem('imageUrls', JSON.stringify(imageUrls));
        }
    }

    function updateCards() {
        // console.log("更新卡片...");
        const container = document.getElementById('container');
        const currentCards = Array.from(container.children);

        imagesArr.forEach((dic, index) => {
            if (index < currentCards.length) {
                // 更新现有卡片
                const card = currentCards[index];
                card.setAttribute('data-index', index);
                card.innerHTML = createCard(dic, index).innerHTML;
            } else {
                // 添加新卡片
                const card = createCard(dic, index);
                container.appendChild(card);
            }
        });

        // 移除多余的卡片
        while (container.children.length > imagesArr.length) {
            container.removeChild(container.lastChild);
        }
        // console.log("卡片更新完成。当前数组:", imagesArr);
    }
    
    function deleteButtonToggle() {
        clearButton.addEventListener('click', () => {
                if (!isImageButtonsVisible) {
                    clearButton.style.filter = "sepia(1) saturate(10) hue-rotate(-50deg)";
                } else {
                    clearButton.style.filter = "none";
                }
                isImageButtonsVisible = !isImageButtonsVisible;
                cards.forEach(card => {
                    const imageButton = card.querySelector('.delete-button');
                    if (imageButton) {
                        imageButton.style.display = isImageButtonsVisible ? 'block' : 'none';
                    }

                });
            });
    }

    // 主要的控制逻辑
    function setupImageButtonControl() {
        const clearButton = document.getElementById('clearButton');
        const moveButton = document.getElementById('moveButton');
        const nextButton= document.getElementById('next-button');
        const cards = document.querySelectorAll('.card');
        let isImageButtonsVisible = false;
        let isSelected = false

        if (clearButton) {
            clearButton.addEventListener('click', () => {

                cards.forEach(card => {
                    const imageButton = card.querySelector('.select-button');
                    if (imageButton) {
                        imageButton.style.display = 'none';
                        imageButton.textContent = ''
                    }
                });
                moveButton.textContent = '选择';
                nextButton.style.display = 'none';
                isSelected = false
                selectedImages = []

                if (!isImageButtonsVisible) {
                    clearButton.style.filter = "sepia(1) saturate(10) hue-rotate(-50deg)";
                } else {
                    clearButton.style.filter = "none";
                }
                isImageButtonsVisible = !isImageButtonsVisible;
                cards.forEach(card => {
                    const imageButton = card.querySelector('.delete-button');
                    if (imageButton) {
                        imageButton.style.display = isImageButtonsVisible ? 'block' : 'none';
                    }
                });
            });
        } else {
            // console.error('无法找到清除按钮');
        }

        if (moveButton) {
            moveButton.textContent = '选择';
            moveButton.addEventListener('click', () => {


                cards.forEach(card => {
                    const imageButton = card.querySelector('.delete-button');
                    if (imageButton) {
                        imageButton.style.display = 'none';
                    }
                });
                clearButton.style.filter = "none";
                isImageButtonsVisible = false;


                if (isSelected) {
                    // moveButton.style.filter = "sepia(1) saturate(10) hue-rotate(-50deg)";
                    moveButton.textContent = '选择';
                    nextButton.style.display = 'none';
                    selectedImages = []
                } else {
                    // moveButton.style.filter = "none";
                    moveButton.textContent = '取消';
                    nextButton.style.display = 'block';
                }
                isSelected = !isSelected;
                cards.forEach(card => {
                    const imageButton = card.querySelector('.select-button');
                    if (imageButton) {
                        imageButton.style.display = isSelected ? 'block' : 'none';
                        imageButton.textContent = ''
                    }

                });
            });
        } else {
            // console.error('无法找到清除按钮');
        }
    }

    document.addEventListener('DOMContentLoaded', () => {
        updateCards();

        setupImageButtonControl();
    });

</script>

</html>